<template>
  <basic-container>
    <div class="example-title">输入框</div>
    <el-row :gutter="20">
      <el-col span="4">
        <el-input class="epm-input epm-input-edit" v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col span="4">
        <el-input class="epm-input" placeholder="请输入内容" v-model="input" :disabled="true"> </el-input>
      </el-col>
      <el-col  span="4">
        <el-input class="epm-input" placeholder="请输入内容" v-model="input" :disabled="true"><template slot="prepend">文案</template></el-input>
      </el-col>
    </el-row>

    <div class="example-title">带 icon 的输入框（属性方式、slot 方式）</div>
    <el-row :gutter="20">
      <el-col span="4">
        <el-input
            class="epm-input"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="input2">
        </el-input>
      </el-col>
      <el-col span="4">
        <el-input
            class="epm-input"
            placeholder="请选择日期"
            suffix-icon="el-icon-date"
            v-model="input1">
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col span="4">
        <el-input
            class="epm-input"
            placeholder="请输入内容"
            v-model="input4">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col span="4">
        <el-input
            class="epm-input"
            placeholder="请选择日期"
            v-model="input3">
          <i slot="suffix" class="el-input__icon el-icon-date"></i>
        </el-input>
      </el-col>
    </el-row>

    <div class="example-title">文本域</div>
    <el-row  :gutter="20">
      <el-col span="4">
        <el-input
            class="epm-input"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
        </el-input>
      </el-col>
    </el-row>

    <div class="example-title">复合型输入框</div>
    <el-row :gutter="20">
      <el-col span="4">
        <el-input
            class="epm-input"
            placeholder="请输入内容" v-model="input1">
          <template slot="prepend">文案</template>
        </el-input>
      </el-col>
      <el-col span="4">
        <el-input
            class="epm-input"
            placeholder="请输入内容" v-model="input2">
          <template slot="append">文案</template>
        </el-input>
      </el-col>
    </el-row>

    <div class="example-title">尺寸</div>
    <el-row :gutter="20">
      <el-col span="4">
        <el-input
            size="medium"
            class="epm-input"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="input2">
        </el-input>

      </el-col>
      <el-col span="4">
        <el-input
            size="small"
            class="epm-input"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="input3">
        </el-input>

      </el-col>
      <el-col span="4">
        <el-input
            size="mini"
            class="epm-input"
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="input4">
        </el-input>
      </el-col>
    </el-row>

    <div style="height: 100px">

    </div>

  </basic-container>
</template>

<script>
export default {
  name: "index",
  date(){
    return{
      input:'',
      input1:'',
      input2:'',
      input3:'',
      input4:'',
      textarea:'',
      select: ''
    }
  }
}
</script>

<style >
.example-title:nth-of-type(1){padding-top: 10px}
.example-title{padding: 30px 0 20px;font-size: 24px}
.explain-txt{display: inline-block;width: 100%;text-align: right}
/*el-input组件加样式class=“epm-input” 覆盖原有样式*/

.epm-input .el-input__inner{height: 32px;line-height: 32px;}
.epm-input.epm-input-edit .el-input__inner{border: 1px solid #606266}
.epm-input .el-input__icon{line-height: 32px}
.epm-input .el-textarea__inner{border: 1px solid #606266}

.epm-input.el-input--mini .el-input__inner{line-height: 28px;height: 28px;}
.epm-input.el-input--medium .el-input__inner{line-height: 36px;height: 36px;}
</style>
